import React from 'react'
import GoBackLayout from "../../../../../layouts/GoBackLayout/GoBackLayout"
import {List} from "antd-mobile"
const Item = List.Item

const PushMain = props => {

    const {history,} = props

    const footerStyle = {
        color: '#484848',
        fontSize: '12px',
        opacity: '0.7',
    }

    const emStyle = {
        color: '#484848',
        fontSize: '12px',
        fontWeight: 'bold',
    }

    const renderFooter = (
        <div>
            <span style={footerStyle}>请在设备的</span>
            <span style={emStyle}> 设置-通知中心-体育直播 </span>
            <span style={footerStyle}>进行更改</span>
        </div>

    )


    return(
        <GoBackLayout
            history={history}
            title='推送设置'
        >

            <List
                renderFooter={renderFooter}
            >
                <Item
                    extra="未开启"
                    arrow="horizontal"
                >
                    <span>通知总开关</span>
                </Item>
            </List>

            <List
                renderHeader='关注比赛'
            >
                <Item
                    extra="0/7"
                    arrow="horizontal"
                    onClick={() => history.push('push/football')}
                >
                    <span>足球比赛</span>
                </Item>
                <Item
                    extra="2/2"
                    arrow="horizontal"
                    onClick={() => history.push('push/basketball')}
                >
                    <span>篮球比赛</span>
                </Item>
            </List>

        </GoBackLayout>
    )
}

export default PushMain
